<template>
	<div class="list-container">
		<div class="sortList clearfix">
			<div class="center">
				<!--banner轮播-->
				<Carousel :list="bannerList"></Carousel>
			</div>
			<div class="right">
				<div class="news">
					<h4>
						<em class="fl">尚品汇快报</em>
						<span class="fr tip">更多 ></span>
					</h4>
					<div class="clearix"></div>
					<ul class="news-list unstyled">
						<li>
							<span class="bold">[特惠]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[公告]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[特惠]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[公告]</span>备战开学季 全民半价购数码
						</li>
						<li>
							<span class="bold">[特惠]</span>备战开学季 全民半价购数码
						</li>
					</ul>
				</div>
				<ul class="lifeservices">
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">话费</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">机票</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">电影票</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">游戏</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">彩票</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">加油站</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">酒店</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">火车票</span>
					</li>
					<li class=" life-item ">
						<i class="list-item"></i>
						<span class="service-intro">众筹</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">理财</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">礼品卡</span>
					</li>
					<li class=" life-item">
						<i class="list-item"></i>
						<span class="service-intro">白条</span>
					</li>
				</ul>
				<div class="ads">
					<img src="./images/ad1.png" />
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import {mapState} from 'vuex'
	import Swiper from 'swiper'
	export default {
		name: 'ListContainer',
		mounted(){
			this.$store.dispatch('getBannerList')
			// setTimeout(()=>{
			// 	var mySwiper = new Swiper ('.swiper-container', {
			// 	    loop: true, // 循环模式选项
				    
			// 	    // 如果需要分页器
			// 	    pagination: {
			// 	      el: '.swiper-pagination',
			// 		  //点击小球的时候也能切换轮播
			// 		  clickable:true
			// 	    },
				    
			// 	    // 如果需要前进后退按钮
			// 	    navigation: {
			// 	      nextEl: '.swiper-button-next',
			// 	      prevEl: '.swiper-button-prev',
			// 	    },
				    
				
			// 	  })
			// },200)
		},
		computed:{
			...mapState({
				//右侧需要的是一个函数。当使用计算属性时，右侧函数会立即执行一次
				//注入一个参数state
				bannerList: (state) => state.home.bannerList,
			})
		},
		//监听计算属性bannerList数据的变化
		// watch:{
		// 	bannerList:{
		// 		handler(newValue,oldValue){
		// 			immediate:true,//立即监听一次,然后再次监听,这里是为了和floor中的轮播保持一致，可以封装轮播组件
		// 			//这里只能保证bannerList数据已经有了，但是没法保证v-for已经执行结束，结构是不是完整还不确定
		// 			//dom还没更新
		// 			this.$nextTick(()=>{
		// 				//dom更新了
		// 				var mySwiper = new Swiper (this.$refs.mySwiper, {
		// 				    loop: true, // 循环模式选项
						    
		// 				    // 如果需要分页器
		// 				    pagination: {
		// 				      el: '.swiper-pagination',
		// 					  //点击小球的时候也能切换轮播
		// 					  clickable:true
		// 				    },
						    
		// 				    // 如果需要前进后退按钮
		// 				    navigation: {
		// 				      nextEl: '.swiper-button-next',
		// 				      prevEl: '.swiper-button-prev',
		// 				    },
		// 				  })
		// 			})
		// 		}
		// 	}
		// }
		
	}
</script>

<style scoped lang="less">
	.list-container {
		width: 1200px;
		margin: 0 auto;

		.sortList {
			height: 464px;
			padding-left: 210px;

			.center {
				box-sizing: border-box;
				width: 740px;
				height: 100%;
				padding: 5px;
				float: left;
			}

			.right {
				float: left;
				width: 250px;

				.news {
					border: 1px solid #e4e4e4;
					margin-top: 5px;

					h4 {
						border-bottom: 1px solid #e4e4e4;
						padding: 5px 10px;
						margin: 5px 5px 0;
						line-height: 22px;
						overflow: hidden;
						font-size: 14px;

						.fl {
							float: left;
						}

						.fr {
							float: right;
							font-size: 12px;
							font-weight: 400;
						}
					}

					.news-list {
						padding: 5px 15px;
						line-height: 26px;

						.bold {
							font-weight: 700;
						}
					}
				}

				.lifeservices {
					border-right: 1px solid #e4e4e4;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;

					.life-item {
						border-left: 1px solid #e4e4e4;
						border-bottom: 1px solid #e4e4e4;
						margin-right: -1px;
						height: 64px;
						text-align: center;
						position: relative;
						cursor: pointer;
						width: 25%;

						.list-item {
							background-image: url(../../../assets/images/icons.png);
							width: 61px;
							height: 40px;
							display: block;
						}

						.service-intro {
							line-height: 22px;
							width: 60px;
							display: block;
						}

						&:nth-child(1) {
							.list-item {
								background-position: 0px -5px;
							}
						}

						&:nth-child(2) {
							.list-item {
								background-position: -62px -5px;
							}
						}

						&:nth-child(3) {
							.list-item {
								background-position: -126px -5px;
							}
						}

						&:nth-child(4) {
							.list-item {
								background-position: -190px -5px;
							}
						}

						&:nth-child(5) {
							.list-item {
								background-position: 0px -76px;
							}
						}

						&:nth-child(6) {
							.list-item {
								background-position: -62px -76px;
							}
						}

						&:nth-child(7) {
							.list-item {
								background-position: -126px -76px;
							}
						}

						&:nth-child(8) {
							.list-item {
								background-position: -190px -76px;
							}
						}

						&:nth-child(9) {
							.list-item {
								background-position: 0px -146px;
							}
						}

						&:nth-child(10) {
							.list-item {
								background-position: -62px -146px;
							}
						}

						&:nth-child(11) {
							.list-item {
								background-position: -126px -146px;
							}
						}

						&:nth-child(12) {
							.list-item {
								background-position: -190px -146px;
							}
						}
					}
				}

				.ads {
					margin-top: 5px;

					img {
						opacity: 0.8;
						transition: all 400ms;

						&:hover {
							opacity: 1;
						}
					}
				}
			}
		}
	}
</style>
